fix: bug - On initial load of Monitor page the charts are half-width#3555
fix: bug - On initial load of Monitor page the charts are half-width#3555gulshank0 wants to merge 3 commits intojaegertracing:mainfrom
Conversation
Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>
There was a problem hiding this comment.
Pull request overview
Fixes a UI sizing bug on the Monitor page where service metric charts initially render at half-width due to measuring the graph container before it exists in the DOM.
Changes:
- Add an effect to re-measure graph container width once
servicesLoadingbecomes false. - Add a unit test intended to cover the post-loading dimension update path.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/jaeger-ui/src/components/Monitor/ServicesView/index.tsx | Triggers a width re-measure after the services list finishes loading so charts can render at the correct width. |
| packages/jaeger-ui/src/components/Monitor/ServicesView/index.test.js | Adds a test case for the loading→loaded transition path (but currently doesn’t assert width recalculation). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #3555 +/- ##
=======================================
Coverage 88.60% 88.60%
=======================================
Files 299 299
Lines 9484 9487 +3
Branches 2420 2501 +81
=======================================
+ Hits 8403 8406 +3
Misses 1078 1078
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
… Measuring DOM size Signed-off-by: gulshank0 <gulshanbahadur002@gmail.com>
|
@Parship12, @yurishkuro Please review it when you have time. Thanks. |
Which problem is this PR solving?
Description of the changes
Fix: Monitor page charts render at half-width on initial load (#3539)
=> Cause: The chart width is derived from the
graphDivWrapperref'soffsetWidth. However, during the initial load,servicesLoadingis true, so the component returns early with a<LoadingIndicator>— the<div ref={graphDivWrapper}>is never mounted. The mount useEffect callsupdateDimensions(), but since the ref is null,graphWidthremains at its initial fallback value of 300 (half-width). A subsequent user interaction would trigger a re-render that finally measures the real container width.=> Fix: Added a
useEffectthat callsupdateDimensions()whenservicesLoadingbecomes false, ensuring the graph container width is measured as soon as it is actually in the DOM.Before change:
previ-graph.mp4
After the change:
after-graph.online-video-cutter.com.mp4
How was this change tested?
Checklist
make lint testAI Usage in this PR (choose one)
See AI Usage Policy.